<!DOCTYPE html>
<!-- saved from url=(0066)http://fantaghiro.github.io/miaov/JS_Intermediary_Lessons/2-6.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>优酷弹窗</title>
<style>
body {margin: 0;}
#mask {background: black; opacity: 0.3; filter: alpha(opacity=30); position: absolute; left: 0; top: 0; display: none;}
#box { width: 300px; height: 200px; padding: 10px; background: white; border: 5px solid #333; position: absolute; display: none;}
#close { position: absolute; right: 5px; top: 5px; text-decoration: none; color: black;}
#close:hover {background: #333; color: white;}
</style>

<script>

//Math.max();返回数值参数中最大的一个值
//Math.min()

//alert( Math.max( 123,234,324,3,345 ) );

window.onload = function() {
	
	var oBtn = document.getElementById('btn');
	var oMask = document.getElementById('mask');
	var oBox = document.getElementById('box');
	var oClose = document.getElementById('close');
	
	oClose.onclick = function() {
		
		oMask.style.display = 'none';
		oBox.style.display = 'none';
		
	}
	
	oBtn.onclick = function() {
		
		var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
		var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
		
		//遮罩层
		oMask.style.display = 'block';
		
		//oMask.style.width = document.body.offsetWidth + 'px';
		//oMask.style.height = document.body.offsetHeight + 'px';
		
		oMask.style.width = Math.max( document.body.offsetWidth, document.documentElement.clientWidth ) + 'px';
		oMask.style.height = Math.max( document.body.offsetHeight, document.documentElement.clientHeight ) + 'px';
		
		//弹出层
		oBox.style.display = 'block';
		oBox.style.left = ( document.documentElement.clientWidth - oBox.offsetWidth ) / 2 + scrollLeft + 'px';
		oBox.style.top = ( document.documentElement.clientHeight - oBox.offsetHeight ) / 2 + scrollTop + 'px';
		
		
	}
	
	window.onscroll = function() {
		
		if (oBox.style.display == 'none') return ;
		
		var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
		var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
		
		oBox.style.left = ( document.documentElement.clientWidth - oBox.offsetWidth ) / 2 + scrollLeft + 'px';
		oBox.style.top = ( document.documentElement.clientHeight - oBox.offsetHeight ) / 2 + scrollTop + 'px';
		
	}
	
	window.onresize = function() {
		
		if (oMask.style.display == 'none') return ;
		
		oMask.style.width = Math.max( document.body.offsetWidth, document.documentElement.clientWidth ) + 'px';
		oMask.style.height = Math.max( document.body.offsetHeight, document.documentElement.clientHeight ) + 'px';
		
		if (oBox.style.display == 'none') return ;
		
		var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
		var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
		
		oBox.style.left = ( document.documentElement.clientWidth - oBox.offsetWidth ) / 2 + scrollLeft + 'px';
		oBox.style.top = ( document.documentElement.clientHeight - oBox.offsetHeight ) / 2 + scrollTop + 'px';
		
	}
	
}
</script>
</head>

<body style="height:2000px;">
	<input type="button" value="登陆" id="btn">
    
    <div id="mask" style="width: 664px; height: 2000px;"></div>
    <div id="box" style="left: 332px; top: 288.5px;">
    	<a href="javascript:;" id="close">×</a>
        这里是登陆的表单等内容
    </div>


<div id="__nightingale_view_cover" style="width: 100%; height: 100%; transition: -webkit-transform 10s ease-in-out; position: fixed !important; left: 0px !important; bottom: 0px !important; overflow: hidden !important; pointer-events: none !important; z-index: 2147483647; opacity: 0; background: rgb(0, 0, 0) !important;"></div></body></html>